<script setup lang="ts">
interface Props {
  item: any;
}

const emits = defineEmits(['playSound']);

const props = defineProps<Props>();
const handleClick = () => {
  emits('playSound', props.item.msg);
};
const sArr = ['system', 'overwzq', 'userTip'];
const issystem = () => {
  return sArr.includes(props.item.type);
};
</script>

<template>
  <div class="roomart">
    <span class="name">
      <span class="name-ai" v-if="item.type == 'ai'">
        <SvgIcon
          style="width: 60px; height: 20px; overflow: hidden"
          :size="60"
          class="icon"
          icon="svg:gpt"
        />
      </span>
      <span class="name-ai" v-else-if="item.type == 'xinghuo'">
        <SvgIcon :size="20" class="icon" icon="svg:xinghuo" />
      </span>

      <span class="system-name" v-else-if="issystem()"> 系统 </span>
      <span v-else> {{ item.name }} ></span>
    </span>

    <span class="sound" v-if="item.type === 'sound'" @click="handleClick">
      <SvgIcon class="icon" icon="svg:sound" />
      语音消息
    </span>
    <span class="msg" v-else-if="item.type === 'system'">
      <RichText :showCope="false" :content="item.msg" />
    </span>

    <span class="msg" v-else>
      <div v-if="item.status == 'image'">
        <img class="chat-img" :src="item.imgUrl" />
      </div>
      <div v-else>
        <RichText :showCope="false" :content="item.msg" />
      </div>
    </span>
  </div>
  <div class="msg" v-if="item.qipu">
    <Qp :size="18" :showTip="false" :qipu="item.qipu" />
  </div>
</template>

<style lang="scss" scoped>
.roomart {
  line-height: 2;
  display: flex;
  flex-wrap: wrap;
  color: #ccc;
  align-items: flex-start;
}
.sound {
  border: 1px solid #888;
  padding: 0px 10px;
  border-radius: 5px;
  height: 25px;
  line-height: 25px;
  font-size: 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
  .icon {
    font-size: 18px;
    margin-right: 4px;
  }
}
.name {
  color: #ccc;
  margin-right: 5px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 28px;
  &-ai {
    display: flex;
    align-items: center;
  }
}
.msg {
  color: #ccc;
  flex: 1;
}
.tagname {
  color: #dcdcaa;
}
.tagqian {
  color: #f19f1c;
  padding: 0px 2px;
}

.system-name {
  background-color: #3d3d3d;
  color: #fff;
  padding: 0px 5px;
  font-size: 12px;
  margin-right: 8px;
  border-radius: 5px;
}
.chat-img {
  max-width: 100%;
  height: auto;
}
</style>
